import classNames from 'classnames';
import { format } from 'date-fns';
import { camelCase } from 'lodash';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
// import { BalanceTransaction } from 'src/model/Property';
import { bnFormat } from 'src/util/bigNumber';
import style from './Table.module.scss';

type BalanceTransaction = any

type Props = {
  data: BalanceTransaction[];
  navigateCallback: (transaction: BalanceTransaction) => void;
};

const Table = ({ data, navigateCallback }: Props) => {
  const { t } = useTranslation();

  const onDetailClick = (transaction: BalanceTransaction) => () => {
    navigateCallback(transaction);
  };

  const elementMapFunction = (
    transaction: BalanceTransaction,
    index: number,
    array: BalanceTransaction[],
  ) => (
    <div key={transaction.FID} className={style.dataRowBlock}>
      <div className={style.dataRow}>
        <div className={classNames(style.item, style.timeItem, style.itemWidth)}>
          {format(Date.parse(transaction.FAddtime), 'yyyy/MM/dd HH:mm:ss')}
        </div>
        <div className={classNames(style.item, style.itemWidth)}>
          {bnFormat(transaction.FQuantity)}
        </div>
        <div className={classNames(style.item, style.itemWidth)}>
          {bnFormat(transaction.FCoin)}
        </div>
        <div className={classNames(style.item, style.infoItem, style.itemWidth)}>
          {transaction.FNote}
          {/* {t(`propertyDetail.desc.transactionType.${camelCase(transaction.type)}`)} */}
          {/* {!['修正', '提领手续费', '团队返佣收入', '阶级返佣收入'].includes(
            transaction.FNote,
          ) && (
              <Button appearance="text" onClick={onDetailClick(transaction)}>
                详情
              </Button>
            )} */}
        </div>
      </div>
      <div className={classNames(style.divider, { [style.hide]: index >= array.length })} />
    </div>
  );

  return (
    <div className={style.self}>
      <div className={style.titleRow}>
        <div className={style.itemWidth}>时间</div>
        <div className={style.itemWidth}>数量</div>
        <div className={style.itemWidth}>余额</div>
        <div className={style.itemWidth}>资讯</div>
      </div>
      <div className={style.divider} />
      {data.map(elementMapFunction)}
    </div>
  );
};

export default Table;
